<template>
  <PageTabelLayout>
    <template #pageHeader>
      <div class="my-header" style="padding-left: 10px;" v-if="headerShow">
        <a-form size="small" :model="searchData" auto-label-width layout="inline">
          <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="流转卡号">
            <a-input class="bacClass"  allow-clear v-model="searchData.flowCardCode" />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="工序">
            <a-input class="bacClass"  allow-clear v-model="searchData.process" />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="班次">
            <a-input class="bacClass"  allow-clear v-model="searchData.beginClasses" />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="班组">
            <a-input class="bacClass"  allow-clear disabled />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="开卡日期">
            <a-range-picker  popup-container="html"  class="bacClass"  @change="changeDate" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="车间">
            <a-input class="bacClass"  allow-clear v-model="searchData.workshop" />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="客户名称">
            <a-input class="bacClass"  allow-clear v-model="searchData.customName" />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="工号">
            <a-input class="bacClass"  allow-clear v-model="searchData.staffCode" />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="姓名">
            <a-input class="bacClass"  allow-clear v-model="searchData.staffName" />
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="筛选">
            <a-select popup-container="html"  allow-clear class="bacClass" >
              <a-option value="全部">全部</a-option>
              <a-option value="开始">开始</a-option>
              <a-option value="结束">结束</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="审核">
            <a-select popup-container="html"  allow-clear class="bacClass" >
              <a-option value="全部">全部</a-option>
              <a-option value="已审核">已审核</a-option>
              <a-option value="未审核">未审核</a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar" style="padding:0px 10px 10px 10px;">
        <Toolbar :items="['查询']" @select="selectHandler" />
      </div>
    </template>
    <template #pageTabel>
      <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
          @grid-ready="gridReady" style="height: 100%;" class='ag-theme-alpine' :defaultColDef="defaultColDef"
          :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData" @columnResized="onColumnResized"
          @columnMoved="onColumnMoved"></AgGridVuesCopys>
      </a-spin>
    </template>
    <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
      @change="changePage" @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
      :page-size="pagination.pageSize" :current="pagination.page" />

    <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.showDetail"
      :mask-closable="false" placement="bottom" @cancel="pageData.showDetail = false">
      <template #title>明细</template>
      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
        @grid-ready="fGridReady" style="height: 100%;" class='ag-theme-alpine' :defaultColDef="defaultColDef"
        :rowData="farmDetailList" :columnDefs="farmDetailColumn" :localeText="localeTextData" />
      <template #footer>
        <a-button @click="pageData.showDetail = false">
          关闭
        </a-button>
      </template>
    </a-drawer>
  </PageTabelLayout>
</template>

<script  lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { ref, reactive, onMounted } from 'vue';

import { localeText } from '@/api/aggridZw'
import emitter from '@/hooks/useEventBus'
import { usePagination, useTable } from '@/hooks/table';
import { processScan } from '@/api/DyeingshopManagement/workshopProcessScan'
import { wordProcess } from '@/api/DyeingshopManagement/getOrderFn';
import { Message } from '@arco-design/web-vue';
import { pagingList } from "@/api/paging";
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'

export default {
  name: "farmScanList",
  setup() {
    let headerShow = ref<boolean>(true);
    let processScanApi = processScan();
    let changHeadShow = (boolVal: boolean) => {
      headerShow.value = boolVal;
      emitter.emit('window-change');
    };
    onMounted(() => {
      selectHandler();
      emitter.on("refresh-farmScanList", () => {
        selectHandler();
      });
    })

    const searchData = reactive<{
      workshop: string;
      process: string;
      beginClasses: string;
      finishClasses: string;
      createTime: string;
      createTime2: string;
      flowCardCode: string;
      customName: string;
      staffCode: string;
      staffName: string;
    }>({
      workshop: '',
      process: '',
      beginClasses: '',
      finishClasses: '',
      createTime: '',
      createTime2: '',
      flowCardCode: '',
      customName: '',
      staffCode: '',
      staffName: ''
    });
    const doRefresh = async () => {
      pageData.pageLoading = true;
      updateGridState01()
      await processScanApi.getProcessList({
        page: pagination.page,
        limit: pagination.pageSize,
      }, {
        ...searchData
      }).then(({ data, code, message }: any) => {
        if (code === 200) {
          // gridOption.value.sizeColumnsToFit();
          table.handleSuccess(data.list);
          gridOption.value.setRowData(data.list);
          total.value = data.total;
          // console.log(res.data);
        } else {
          Message.error(message)
        }
      })
        .catch(console.log)
        .finally(() => {
          pageData.pageLoading = false;
        });
    };
    const selectHandler = () => {
      pagination.page = 1;
      doRefresh();
    };
    const printArrangCardHandler = () => { };
    const scanDyePartHndler = () => { };
    const gridOption = ref();
    const colState = ref()
    const fGridOption = ref();
    const changeDate = (data: any) => {
      searchData.createTime = data ? data[0] : '';
      searchData.createTime2 = data ? data[1] : '';
    };
    const gridReady = (params: any) => {
      gridOption.value = params.api;
      colState.value = params.columnApi
    };
    const fGridReady = (params: any) => {
      fGridOption.value = params.api;
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      // flex: 1,
      width: 150,
    };
    const cfsValue = [
      {
        headerName: '车间',
        field: 'workshop',
      },
      {
        headerName: '流转卡号',
        field: 'flowCardCode',
      },
      {
        headerName: '客户名称',
        field: 'customName',
      },
      {
        headerName: '设备编号',
        field: 'machineCode',
      },
      {
        headerName: '色号',
        field: 'colorCode',
      },
      {
        headerName: '色称',
        field: 'colorName',
      },
      {
        headerName: '布号',
        field: 'greyCode',
      },
      {
        headerName: '匹数',
        field: 'houseNum',
      },
      {
        headerName: '重量',
        field: 'flowCardWeight',
      },
      {
        headerName: '工段',
        field: 'section',
      },
      {
        headerName: '车号',
        field: 'mobile',
      },
      {
        headerName: '工序',
        field: 'process',
      },
      {
        headerName: '开始员工',
        field: 'beginStaff',
      },
      {
        headerName: '计划开始时间',
        field: 'planBeginTime',
      },
      {
        headerName: '计划结束时间',
        field: 'planFinshTime',
      },
      {
        headerName: '实际开始时间',
        field: 'realityBeginTime',
      },
      {
        headerName: '实际结束时间',
        field: 'realityFinishTime',
      },
      {
        headerName: '结束员工',
        field: 'finishStaff',
      },
      {
        headerName: '是否审核',
        field: 'createTime',
      },
      {
        headerName: '审核人',
        field: 'updateName',
      },
      {
        headerName: '审核日期',
        field: 'updateTime',
      },
      {
        headerName: '备注',
        field: 'remark',
      },
      {
        headerName: '开始班次',
        field: 'beginClasses',
      },
      {
        headerName: '结束班次',
        field: 'finishClasses',
      },
      {
        headerName: '开始班组',
        field: 'updateTime',
      },
      {
        headerName: '结束班组',
        field: 'updateTime',
      },
      {
        headerName: '作业性质',
        field: 'updateTime',
      },
      {
        headerName: '操作',
        field: 'action',
        resizable: false,
        filter: false,
        sortable: false,
        lockPosition: 'right',
        width: '100',
        pinned: 'right',
        cellRenderer: {
          template: `<el-button style="color:#30be16;" link @click="a">明细</el-button>`,
          setup(props: any) {
            const a = () => {
              getDetail(props.params.data)
            }
            return {
              a
            }
          }
        },
      },
    ];
    const total = ref(10);
    const changePage = (val: any) => {
      pagination.page = val
      doRefresh();
    }
    const changeSize = (val: any) => {
      pagination.pageSize = val
      doRefresh();
    }
    const pagination = usePagination(doRefresh);
    const localeTextData: any = ref(localeText);
    const table = useTable();
    const farmDetailList = ref([]);
    const getDetail = async (record: any) => {
      pageData.showDetail = true;
      await wordProcess().getWordProcessList({ flowCardCode: record.flowCardCode }).then((res: any) => {
        if (res.code === 200) {
          let rData = res.data;
          let rList = rData.map((v: any) => {
            return {
              ...v.WorkshopProcessDetailed
            }
          });
          farmDetailList.value = rList;
          fGridOption.value.setRowData(rList);
        } else {
          Message.error(res.message);
        }
      }).catch((err) => { console.log(err) })

    }
    const pageData = reactive<{
      showDetail: boolean,
      pageLoading: boolean,
    }>({
      showDetail: false,
      pageLoading: false
    });


    const farmDetailColumn = [
      {
        headerName: '车间',
        field: 'workshop',
      },
      {
        headerName: '工段',
        field: 'section',
      },
      {
        headerName: '工序',
        field: 'process',
      },
      {
        headerName: '工序备注',
        field: 'processRemark',
      },
      {
        headerName: '插入工序原因',
        field: 'processCause',
      },
      {
        headerName: '责任部门',
        field: 'dutyDep',
      },
      {
        headerName: '工序计划开始时间',
        field: 'planBeginTime',
      },
      {
        headerName: '工序计划结束时间',
        field: 'planFinshTime',
      },
      {
        headerName: '工序实际开始时间',
        field: 'realityBeginTime',
      },
      {
        headerName: '工序实际结束时间',
        field: 'realityFinishTime',
      },
      {
        headerName: '匹数',
        field: 'canUseHouseNum',
      },
      {
        headerName: '重量',
        field: 'canUseWeight',
      },
      {
        headerName: '机号',
        field: 'device',
      },
      {
        headerName: '区域/车号',
        field: 'region',
      },
      {
        headerName: '开始工号',
        field: 'beginCode',
      },
      {
        headerName: '结束工号',
        field: 'finishCode',
      },
      {
        headerName: '开始员工',
        field: 'beginStaff',
      },
      {
        headerName: '结束员工',
        field: 'finishStaff',
      },
      {
        headerName: '开始班次',
        field: 'beginClasses',
      },
      {
        headerName: '结束班次',
        field: 'finishClasses',
      },
      {
        headerName: '作业性质',
        field: 'jobMent',
      },
      {
        headerName: '工序条形码',
        field: 'barCode',
      },
      {
        headerName: '工序说明',
        field: 'cause',
      },
    ]
    const pagingList1: any = ref(pagingList)
    const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('farmScanList01', gridOption, colState, cfsValue)
    const onColumnMoved = () => {
      saveGridState01()
    }
    const onColumnResized = () => {
      saveGridState01()
    }
    return {
      saveOrUpdateGridState01,
      saveGridState01,
      updateGridState01,
      onColumnMoved,
      onColumnResized,
      colState,
      pagingList1,
      headerShow,
      changHeadShow,
      searchData,
      selectHandler,
      printArrangCardHandler,
      scanDyePartHndler,
      localeTextData,
      pagination,
      changeSize,
      total,
      changePage,
      gridReady,
      defaultColDef,
      cfsValue,
      table,
      pageData,
      farmDetailList,
      farmDetailColumn,
      changeDate,
      fGridReady
    }
  },
  components: { PageTabelLayout,  }
}
</script>

<style scoped>
.aInput {
  background: #fff;
  width: 270px;
  border: 1px solid #c9cdd3;
}
:deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}
</style>